<template>
	<view class="card">
		<view class="card-bg1"></view>
		<view class="card-bg2"></view>
		<view class="body">
			<view class="box" v-for="item in list">
				<view class="value">{{item.value}}m³</view>
				<view class="text">{{item.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import _data from '../../../common/_data.js'
	
	export default {
		data() {
			return {
				list: [
					{
						text: '日进水',
						value: ''
					},
					{
						text: '日出水',
						value: ''
					},
				]
			}
		},
		props: {
			category: {
				type: String
			},
		},
		created() {
			let that = this;
			uni.$on('Y2G2M03LL',(data) => {
				if(that.category == 'day') {
					that.list[0].text = '日进水'
				} else if(that.category == 'month') {
					that.list[0].text = '月进水'
				} else if(that.category == 'year') {
					that.list[0].text = '年进水'
				}
				if(data.length > 0 && Object.keys(data[0]).length > 0) {
					let value = 0;
					for (let i = 0; i < data.length; i++) {
						if(that.category != 'day') {
							value += data[i].TotalVal * 1
						} else {
							value += data[i].Val * 1
						}
					}
					that.list[0].value = value.toFixed(0)
				}
			})
			uni.$on('P1E1M06SSL',(data) => {
				if(that.category == 'day') {
					that.list[1].text = '日出水'
				} else if(that.category == 'month') {
					that.list[1].text = '月出水'
				} else if(that.category == 'year') {
					that.list[1].text = '年出水'
				}
				if(data.length > 0 && Object.keys(data[0]).length > 0) {
					let value = 0;
					for (let i = 0; i < data.length; i++) {
						if(that.category != 'day') {
							value += data[i].TotalVal * 1
						} else {
							value += data[i].Val * 1
						}
					}
					that.list[1].value = value.toFixed(0)
				}
			})
		}
	}
</script>

<style>
	.card {
		height: 300rpx;
		padding: 20rpx 30rpx;
		background-color: #80B1FE;
		border-radius: 20rpx;
		color: #fff;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
	}
	
	.card-bg1 {
		position: absolute;
		top: -100rpx;
		right: -100rpx;
		width: 400rpx;
		height: 400rpx;
		border-radius: 50%;
		background-color: #65A7FE;
	}
	
	.card-bg2 {
		position: absolute;
		top: -50rpx;
		right: -50rpx;
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		background-color: #80B1FE;
	}
	
	.body {
		height: 100%;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}
	
	.box {
		width: 50%;
		text-align: center;
		position: relative;
		z-index: 2;
	}
	
	.value {
		font-size: 40rpx;
		font-weight: bold;
	}
	
	.text {
		color: #ADCBF5;
	}
</style>
